<template>
    <div>
        <div id="pdfDom" ref="pdfDom">
        <div style="width:100%;background-color:#fff;box-sizing: border-box;padding:0 56px;" v-if="orderNoticeObj.cgSupplier">
            <div v-for="(item,index) in orderNoticeObj.arrayList" :key="index" class="page">
                <div class="pdfTitle" v-if="index===0">成都市佳颖医用制品有限公司</div>
                <div class="pdfTitle" v-if="index===0">订货通知单</div>
                <div  class="pdfContent">
                    <div  class="clearbox" v-if="index===0">
                        <div class="width50"  v-if="orderNoticeObj.cgSupplier">
                            <div>供方：<span v-text="orderNoticeObj.cgSupplier.name"></span></div>
                            <div>联系人：<span v-text="orderNoticeObj.cgSupplier.contacts" ></span></div>
                            <div>联系电话：<span v-text="orderNoticeObj.cgSupplier.phone"></span></div>
                            <div>传真：<span v-text="orderNoticeObj.cgSupplier.fax"></span></div>
                        </div>
                        <div class="width50" >
                            <div>需方：<span>成都市佳颖医用制品有限公司</span></div>
                            <div>联系人：<span v-text="orderNoticeObj.jyUser.name" v-if="orderNoticeObj.jyUser"></span></div>
                            <div>联系电话：<span v-text="orderNoticeObj.jyUser.phone" v-if="orderNoticeObj.jyUser"></span></div>
                            <div>传真：<span>028-8481 4555</span></div>
                        </div>
                    </div>
                    <div>
                        <div class="orderGoodsTable" >
                            <table border="1" cellspacing="0" cellpadding="0" bordercolor="#000000" class="myTable">
                                <tr>
                                    <th>货物名称</th>
                                    <th>规格</th>
                                    <th>单价（元）</th>
                                    <th>数量</th>
                                    <th>金额（元）</th>
                                    <th>到货时间</th>
                                    <th>备注说明</th>
                                </tr>
                                <tr v-for="val in item" :key="val.id">
                                    <td >{{val.bomNameName}}</td>
                                    <td>{{val.type}}</td>
                                    <td v-text="val.price"></td>
                                    <td v-text="val.nums"></td>
                                    <td v-text="val.total"></td>
                                    <td v-text="val.planArriveTimeFormatter"></td>
                                    <td v-text="val.remark"></td>
                                </tr>
                                <tr v-if="index===(orderNoticeObj.arrayList.length-1)">
                                    <td colspan="4">总价</td>
                                    <td v-text="orderNoticeObj.total"></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>

                        </div>
                    </div>
                </div>
                <div class="discrtion" v-if="index===(orderNoticeObj.arrayList.length-1)">
                    <div class="discrtion-title">说明事项：</div>
                    <div>1、请贵方提供的每批货物必须有相关的检测报告和生产批号，且生产批号尽可能的少。检测报告请随货一同发出。</div>
                    <div>2、质量标准按图纸技术标准执行。</div>
                    <div>3、请计算控制好货物运输所需时间，按以上到货时间准时交货。</div>
                    <div>4、请贵方开增值税专用发票，随货物一起发出或同时邮寄发出。</div>
                    <div>5、贵方如有设备、材料、模具等方面发生更改，导致产品有任何变化时，请提前书面通知我方相关人员。</div>
                    <div>5、以上内容贵方如无异议，请签章确认或电话回复。</div>
                </div>
                <div class="clearbox" v-if="index===(orderNoticeObj.arrayList.length-1)">
                    <div class="width50" >
                        <div>供方：<span v-text="orderNoticeObj.cgSupplier.name"></span></div>
                        <div>确认：</div>
                        <div>日期：<span>&nbsp;&nbsp;{{new Date().getFullYear()}}&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日</span></div>
                    </div>
                    <div class="width50"  >
                        <div>需方：<span>成都市佳颖医用制品有限公司</span></div>
                        <div>确认：</div>
                        <div>日期：<span>&nbsp;&nbsp;{{orderNoticeObj.year}}&nbsp;&nbsp;年&nbsp;&nbsp;{{orderNoticeObj.month}}&nbsp;&nbsp;月&nbsp;{{orderNoticeObj.Date}}&nbsp;&nbsp;日</span></div>
                    </div>
                </div>
                 <div class="pagination">
                    <div>第{{index+1}}页/共{{orderNoticeObj.arrayList.length}}页</div>
                    <div class="always"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import cgbHttp from '@/axios/cgbHttp.js'
export default {
    name:'orderNotice',
    props:{
        pid:{
            type:String,
            default:''
        }
    },
    data(){
        return {
           orderNoticeObj:{}
        }
    },
    methods:{
        getCgPdfData(id){
            let self = this;
            let nowDate = new Date();
            let total=0;
            cgbHttp.cgPdfData(id).then(res=>{
                res.content.cgTaskDetails.forEach(item=>{
                    item.planArriveTimeFormatter = item.planArriveTime.split(' ')[0];
                    total+= Number(item.total);
                })
                self.orderNoticeObj = res.content;
                self.orderNoticeObj.year=   nowDate.getFullYear();
                self.orderNoticeObj.month= (nowDate.getMonth() + 1 < 10 ? '0' + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1);
                self.orderNoticeObj.Date= (nowDate.getDate() < 10 ? '0' + nowDate.getDate() : nowDate.getDate());
                self.orderNoticeObj.total = total.toFixed(2);
                self.orderNoticeObj.arrayList=self.alterData(res.content.cgTaskDetails,32);
                setTimeout(()=>{
                    self.$print(self.$refs.pdfDom);
                },300)
            })
        },
         alterData(arr, n) {
            //重构data数据（数组一维变二维）
            let self = this,
                Arr = arr != null ? arr : [],
                len = Arr.length,
                lineNum = (lineNum =
                    len % n === 0 ? len / n : Math.floor(len / n + 1)),
                res = [];
            for (let i = 0; i < lineNum; i++) {
                let temp = Arr.slice(i * n, i * n + n);
                res.push(temp);
            }
            return res;
        }
    }
}
</script>
<style scoped>
.page{
    padding:56px 0;
    position: relative;
}
.pdfTitle{
    text-align: center;
    color:#000;
    font-size: 18px;
}
.pdfContent{
    line-height: 2;
    color: #000;
    margin-top:36px;

}
.orderGoodsTable{
    margin-top:24px;
    overflow: hidden;
}
.myTable{
    width: 100%;
    text-align: center;
    border-collapse:collapse;
    line-height: 1.6;
    font-size: 14px;
}
.discrtion{
    font-size: 12px;
    margin:24px 0;
}
.discrtion .discrtion-title{
    font-weight: bold;
}
.clearbox{
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    line-height: 2;
    font-size: 14px;
}
.width50{
    width:49%;
   display: inline-block;
   box-sizing: border-box
}
.pagination{
    color:#666;
    font-size: 12px;
    text-align: center;
}
</style>
<style type="text/css" media="print">
@page {
    size: auto;
    margin: 0mm;
}
.always {
     page-break-after: always;
}
</style>
